<template>
  <!-- 课程时间安排选择器组件 -->
  <div class="schedule-time-range-picker">
    <!-- 主要内容区域 -->
    <div class="picker-main-content">
      <!-- 日期时间范围选择器 -->
      <date-time-range-picker
        v-model:date="dateValue"
        v-model:startTime="startTimeValue"
        v-model:endTime="endTimeValue"
      />
      <!-- 重复类型选择器 -->
      <el-select v-model="repeatTypeValue" placeholder="重复类型" class="repeat-select">
        <el-option value="once" label="单次" />
        <el-option value="daily" label="每天" />
        <el-option value="weekly" label="每周" />
        <el-option value="monthly" label="每月" />
      </el-select>
      <!-- 重复结束日期选择器（仅在非单次时显示） -->
      <el-date-picker
        v-if="repeatTypeValue !== 'once'"
        v-model="repeatEndDateValue"
        type="date"
        placeholder="重复结束日期（必填）"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        class="end-date-picker"
        :validate-event="true"
        :rules="[{ required: true, message: '请选择重复结束日期', trigger: 'change' }]"
      />
    </div>
    <!-- 删除按钮（仅在允许删除时显示） -->
    <div class="delete-button" @click="$emit('delete')" v-if="canDelete">
      <span>删除</span>
    </div>
  </div>
</template>

<script>
import DateTimeRangePicker from './DateTimeRangePicker.vue'
import { ElMessage } from 'element-plus'

/**
 * 课程时间安排选择器组件
 * 提供课程时间安排的选择功能，包括日期、时间范围和重复规则
 */
export default {
  name: 'ScheduleTimeRangePicker',
  components: {
    DateTimeRangePicker
  },
  props: {
    /**
     * 选中的日期，格式为YYYY-MM-DD
     */
    date: {
      type: String,
      default: ''
    },
    /**
     * 开始时间
     */
    startTime: {
      type: [Date, null],
      default: null
    },
    /**
     * 结束时间
     */
    endTime: {
      type: [Date, null],
      default: null
    },
    /**
     * 重复类型：once(单次)、daily(每天)、weekly(每周)、monthly(每月)
     */
    repeatType: {
      type: String,
      default: 'once'
    },
    /**
     * 重复结束日期，格式为YYYY-MM-DD
     */
    repeatEndDate: {
      type: String,
      default: ''
    },
    /**
     * 是否允许删除此时间安排
     */
    canDelete: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:date', 'update:startTime', 'update:endTime', 'update:repeatType', 'update:repeatEndDate', 'delete', 'validate'],
  computed: {
    /**
     * 日期值的计算属性，用于双向绑定
     */
    dateValue: {
      get() {
        return this.date;
      },
      set(value) {
        this.$emit('update:date', value);
      }
    },
    /**
     * 开始时间的计算属性，用于双向绑定
     */
    startTimeValue: {
      get() {
        return this.startTime;
      },
      set(value) {
        this.$emit('update:startTime', value);
      }
    },
    /**
     * 结束时间的计算属性，用于双向绑定
     */
    endTimeValue: {
      get() {
        return this.endTime;
      },
      set(value) {
        this.$emit('update:endTime', value);
      }
    },
    /**
     * 重复类型的计算属性，用于双向绑定
     */
    repeatTypeValue: {
      get() {
        return this.repeatType;
      },
      set(value) {
        this.$emit('update:repeatType', value);
        // 当切换到非单次时，如果没有设置结束日期，显示提示
        if (value !== 'once' && !this.repeatEndDate) {
          ElMessage.warning('请设置重复结束日期');
        }
        // 当切换到单次时，清空结束日期
        if (value === 'once') {
          this.$emit('update:repeatEndDate', '');
        }
      }
    },
    /**
     * 重复结束日期的计算属性，用于双向绑定
     */
    repeatEndDateValue: {
      get() {
        return this.repeatEndDate;
      },
      set(value) {
        this.$emit('update:repeatEndDate', value);
      }
    },
    isValid() {
      // 基本验证：日期、开始时间和结束时间必须存在
      const basicValid = this.date && this.startTime && this.endTime;
      
      // 如果是非单次课程，还需要验证重复结束日期
      if (this.repeatType !== 'once') {
        return basicValid && this.repeatEndDate;
      }
      
      return basicValid;
    }
  },
  watch: {
    isValid: {
      handler(newValue) {
        this.$emit('validate', newValue);
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
/* 课程时间安排选择器容器 */
.schedule-time-range-picker {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
}

/* 悬停效果 */
.schedule-time-range-picker:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: #dcdfe6;
}

/* 主要内容区域 */
.picker-main-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

/* 重复类型选择器 */
.repeat-select {
  width: 140px;
}

/* 结束日期选择器 */
.end-date-picker {
  width: 140px;
}

/* 删除按钮 */
.delete-button {
  color: #f56c6c;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f56c6c;
  background-color: rgba(245, 108, 108, 0.05);
  width: 60px;
}

/* 删除按钮悬停效果 */
.delete-button:hover {
  background-color: #f56c6c;
  color: white;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .schedule-time-range-picker {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .delete-button {
    margin-left: 0;
    margin-top: 12px;
    align-self: flex-end;
  }
}
</style> 